<template>
  <free-app :bgType="'image'" :navbar="{
    title: '我的群组'
  }">
    <view class="flex flex-col gap-4 mt-208rpx mx-3">


      <view class="p-3 flex flex-col gap-20rpx shadow1">
        <view class="text-24rpx">小店图片</view>

        <!-- //上传图片 -->

        <wd-upload :file-list="fileList"
          action="https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload"
          @change="handleChange" :before-upload="beforeUpload"><wd-icon name="add" size="60rpx"
            custom-class="add"></wd-icon></wd-upload>

      </view>
      <!-- 表单校验 -->
      <wd-form ref="form" :model="model" custom-class="form">
        <wd-cell-group border>
          <wd-input label="小店名称" label-width="100rpx" prop="value1" clearable v-model="model.value1" placeholder="请输入"
            :rules="[{ required: true, message: '请填写小店名称' }]" />
          <wd-input label="联系人" label-width="100rpx" prop="value2" clearable v-model="model.value2" placeholder="请输入"
            :rules="[{ required: true, message: '请填写小店名称' }]" />
            <wd-input label="联系人电话" label-width="100rpx" prop="value3"
            clearable v-model="model.value3" placeholder="请输入" :rules="[{ required: true, message: '请填写小店名称' }]" />
        </wd-cell-group>

        <view class="p-3 mt-4 flex flex-col gap-20rpx shadow1">
          <view class="text-24rpx">上传身份证</view>

          <!-- //上传图片 -->

          <view class="flex gap-20rpx"> <wd-upload :file-list="fileList"
              action="https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload"
              @change="handleChange" :before-upload="beforeUpload"><wd-icon name="add" size="60rpx"
                custom-class="add"></wd-icon></wd-upload>

            <wd-upload :file-list="fileList"
              action="https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload"
              @change="handleChange" :before-upload="beforeUpload"><wd-icon name="add" size="60rpx"
                custom-class="add"></wd-icon></wd-upload>


          </view>
        </view>

        <!-- 营业执照 -->
        <view class="p-3 flex flex-col gap-20rpx shadow1">
          <view class="text-24rpx">营业执照(两张)</view>

          <!-- //上传图片 -->

          <wd-upload :file-list="fileList"
            action="https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload"
            @change="handleChange" :before-upload="beforeUpload"><wd-icon name="add" size="60rpx"
              custom-class="add"></wd-icon></wd-upload>


        </view>

        <view class="footer">
          <wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
        </view>
      </wd-form>

    </view>


  </free-app>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useToast } from 'wot-design-uni';

//上传图片
import { useMessage } from 'wot-design-uni'

const messageBox = useMessage()
const toast = useToast()
const fileList = ref<any[]>([

])

const beforeUpload = ({ files, resolve }) => {
  messageBox
    .confirm({
      msg: '是否上传',
      title: '提示'
    })
    .then(() => {
      resolve(true)
    })
    .catch(() => {
      toast.show('取消上传操作')
    })
}

function handleChange({ fileList }) {
  fileList.value = fileList
}

// 表单


const { success: showSuccess } = useToast()

const model = reactive<{
  value1: string
  value2: string
  value3: string
}>({
  value1: '',
  value2: '',
  value3: ''
})

const form = ref()

function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        showSuccess({
          msg: '校验通过'
        })
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>



<style lang="scss" scoped>
.footer {
  padding: 12rpx;
}

//add按钮
:deep(.add) {
  padding: 76rpx;
  background-color: var(--fill-color-fill-1, #F7F8FA);
  ;
}

:deep(.form) {
  .wd-input {
    width: 638rpx;
    height: 44rpx;
    padding: 32rpx;

  }

  .wd-input__label {
    width: 295rpx !important;
   
    min-width: none !important;
    max-width: none !important;
  }

  .wd-input__body {
    width: 295rpx;
  }
  .wd-input__error-message{
    z-index: 9999;
    position:relative;
  }
}

</style>